<!--搜索框组件-->
<template>
  <div id="inputSearch">
    <a-input v-model:value="searchWords" placeholder="请输入关键词搜索">
      <template #prefix>
        <SearchOutlined />
      </template>
    </a-input>
  </div>
</template>
<script setup lang="ts">
import { defineEmits, ref, watch } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";

const emit = defineEmits(["onInputChange"]);
const searchWords = ref<string>("");
watch(
  () => searchWords.value,
  (newVal) => {
    emit("onInputChange", newVal);
  },
  {
    deep: true,
  }
);
</script>
<style scoped>
:deep(.ant-input-affix-wrapper) {
  padding: 9px;
  border-radius: 14px;
}
:deep(.ant-input-affix-wrapper > input.ant-input) {
  font-size: 16px;
}
:deep(.ant-input-affix-wrapper .ant-input-prefix) {
  margin-inline-end: 18px;
  color: #9ea3ae;
}
:deep(.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disable):hover) {
  border-color: #c33c31;
}
:deep(.ant-input-affix-wrapper-focused) {
  border-color: #c33c31;
  box-shadow: 0 0 0 2px rgba(195, 60, 49, 0.1);
}
</style>
